<!DOCTYPE html>

<html>

<head>
    <title></title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id="app-2">
        <button v-on:click="show = !show">
            Toggle
        </button>
        <transition name="slide-fade">
            <p v-if="show">hello</p>
        </transition>
    </div>
    <script>
        new Vue({
            el: '#app-2',
            data: {
                show: true
            }
        })
    </script>
</body>

<style>
    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */

    .slide-fade-enter-active {
        transition: all .3s ease;
    }

    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter,
    .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */

    {
        transform: translateX(10px);
        opacity: 0;
    }
</style>

</html>